<template>
    <div class="bottom-box">
        <router-link to="/home" tag="div" >
            <i class="iconfont icon-home"></i>
            <p>首页</p>
        </router-link>
        <router-link to="/classify" tag="div">
            <i class="iconfont icon-type"></i>
            <p>分类</p>
        </router-link>
        <router-link to="/cart" tag="div">
            <i class="iconfont icon-cart"></i>
            <p>购物车</p>
        </router-link>
        <router-link to="/about" tag="div">
            <i class="iconfont icon-about"></i>
            <p>关于我</p>
        </router-link>
    </div>
</template>
<script>
export default {
    mounted(){
        // let divs=document.querySelectorAll(".iconfont");
        // console.log(divs);
    }
}
</script>
<style lang="less" scoped>
.bottom-box{
    position:absolute;
    bottom:0px;
    width:100%;
    height:1rem;
    z-index:100;
    background-color:@white;
    box-sizing:border-box;
    display:flex;
    flex-flow:row nowrap;
    justify-content:space-around;
    // >div:first-child{
        // color:@pink;
    // }
    >div{
        text-align:center;
        font-weight:bold;
        // width:25%;
        >i{
            font-size:0.4rem;
        }
        >p{
            margin-top:0.1rem;
        }
    }
}
.router-link-exact-active{
    color:@pink;
}
</style>